/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  useWindowDimensions,
} from 'react-native';
import {songs, Track} from '../model';
import CurPlaySong from './CurPlaySong';
import PlaylistHeaderTable from './PlaylistHeaderTable';
import PlaylistHeader from './PlaylistHeader';
import {
  BreakpointsReference,
  GridCol,
  GridRow,
  useBreakpointValue,
} from '@hadss/react_native_adaptive_layout/src';

const SongTable = (props: any) => {
  const {changePage} = props;
  const currentBp = useBreakpointValue<string>({
    base: 'base',
    sm: 'sm',
    md: 'md',
    lg: 'lg',
    xl: 'xl',
  }) as string;

  const isWide = currentBp == 'lg' || currentBp == 'xl';
  let itemSpace = useBreakpointValue({
    base: 16,
    sm: 0,
    md: 0,
  });

  let itemListSpace = useBreakpointValue({
    base: 16,
    sm: 16,
    md: 24,
    lg: 24,
    xl: 24,
  });
  // 列表距离底部的间距
  const listButtom = useBreakpointValue({
    base: 400,
    sm: 400,
    md: 400,
    lg: 200,
    xl: 200,
  });
  // 更多图标距离右边的间距
  const songItemSpace = useBreakpointValue({
    base: 30,
    sm: 25,
    md: 30,
    lg: 35,
    xl: 35,
  });
  const renderItem = (item: Track) => (
    <View style={[styles.songItem, {marginLeft: itemListSpace}]}>
      <View style={styles.songInfo}>
        <Text style={styles.songTitle}>{item.title}</Text>
        <View style={{flexDirection: 'row', top: 2}}>
          <Image
            source={require('../../../../assets/playList/acoustic.png')}
            style={styles.acoustic}
          />
          <Text style={styles.songArtist}>{item.artist}</Text>
        </View>
      </View>
      <View style={{flex: 1}} />
      <Image
        source={require('../../../../assets/playList/song_item_icon.png')}
        style={[styles.songIcon, {marginRight: songItemSpace}]}
      />
    </View>
  );

  return (
    <View
      style={[
        styles.outStyle,
        {marginLeft: itemSpace, marginRight: itemSpace},
      ]}>
      {isWide ? (
        <TouchableOpacity
          onPress={() => {
            changePage('Home');
          }}
          style={styles.goBackOut}>
          <Image
            source={require('../../../../assets/playList/back.png')}
            style={styles.goBack}
          />
        </TouchableOpacity>
      ) : (
        ''
      )}
      <View style={styles.listOut}>
        {/* 在pad、PC端列表上方有一个汇总的文案 */}
        {isWide && <PlaylistHeaderTable />}
        <View style={styles.flexStyle}>
          {isWide && (
            <View style={styles.listHeader}>
              <Image
                source={require('../../../../assets/playList/play_icon.png')}
                style={styles.listHeaderImage}
              />
              <Text style={styles.listHeaderText}>{'播放全部'}</Text>
              <Text style={styles.listHeaderText}>{songs.length}</Text>
              <View style={styles.flexStyle} />
              <Image
                source={require('../../../../assets/playList/show_all.png')}
                style={styles.openIcon}
              />
            </View>
          )}
          {!isWide && (
            <PlaylistHeader
              {...props}
              songsLength={songs.length}></PlaylistHeader>
          )}
          <ScrollView>
            <GridRow
              style={{
                marginBottom: listButtom,
                width: useWindowDimensions().width - (isWide ? 380 : 0),
              }}
              breakpoints={{
                value: [480],
                reference: BreakpointsReference.ComponentSize,
              }}
              columns={12}>
              {songs.map(item => (
                <GridCol span={{xs: 12, sm: 6}} key={item.songID}>
                  {renderItem(item)}
                </GridCol>
              ))}
            </GridRow>
          </ScrollView>
        </View>
      </View>
      <CurPlaySong song={songs[0]} />
    </View>
  );
};

const styles = StyleSheet.create({
  outStyle: {
    flex: 1,
    backgroundColor: 'rgb(241, 243, 245)',
  },
  songItem: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    height: 64,
    alignItems: 'center',
  },
  songInfo: {
    flexDirection: 'column',
    justifyContent: 'center',
  },
  songTitle: {
    fontSize: 16,
    fontWeight: '500',
    lineHeight: 21,
    color: 'rgba(0, 0, 0, 0.9)',
  },
  songArtist: {
    fontSize: 12,
    color: 'rgba(0, 0, 0, 0.4)',
    left: 4,
    lineHeight: 16,
  },
  songIcon: {
    width: 20,
    height: 20,
  },
  acoustic: {
    width: 16,
    height: 16,
  },
  listHeader: {
    height: 48,
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 32,
  },
  listHeaderImage: {
    width: 32,
    height: 32,
  },
  listHeaderText: {
    left: 8,
    fontSize: 18,
    color: 'rgba(0, 0, 0, 0.9)',
    fontWeight: '700',
    lineHeight: 24,
  },
  openIcon: {
    width: 20,
    height: 20,
    right: 32,
  },
  goBack: {
    width: 40,
    height: 40,
  },
  goBackOut: {
    height: 56,
    justifyContent: 'center',
    marginTop: 24,
    marginLeft: 32,
  },
  listOut: {
    flexDirection: 'row',
  },
  flexStyle: {
    flex: 1,
  },
});

export default SongTable;
